<template>
  <div class="dashboard-editor-container">
    <!-- <div class="dashboard-text">name:{{name}}</div> -->
    <!--<panel-group @handleSetLineChartData="handleSetLineChartData"></panel-group> -->
    <!-- <div class="dashboard-text">roles:<span v-for='role in roles' :key='role'>{{role}}</span></div> -->
    <!--<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData"></line-chart>
    </el-row>
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <transaction-table></transaction-table>
    </el-row> -->

    <el-tabs v-model="activeName" @tab-click="handleClick">

      <el-tab-pane label="成绩分布" name="first">
        <select-options  @search="search" @changeExamin="changeExamin" :schoolyearOptions="schoolyearOptions" :semestersOptions="semestersOptions"
        :gradeOptions="gradeOptions" :subjectOptions="subjectOptions" :examinOptions="examinOptions" :t="t" ></select-options>
        <normal-distribution :chart-data="chartData"></normal-distribution>
    </el-tab-pane>

    <el-tab-pane label="成绩统计分析" name="second">
      <transaction-table></transaction-table>
    </el-tab-pane>

    <el-tab-pane label="学生成绩分析" name="third">
    </el-tab-pane>
    <el-tab-pane label="成绩排名分析" name="fourth">成绩排名分析</el-tab-pane>
  </el-tabs>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import TransactionTable from './components/TransactionTable'
import NormalDistribution from './components/NormalDistribution'
import SelectOptions from '@/components/SelectOptions'
import Radar from './components/Radar'
import axios from 'axios'
// const lineChartData = {
//   xpTeachers: {
//     Data: [],
//     xAxisData: []
//     // Data: [100, 120, 161, 134, 105, 160, 165],
//     // xAxisData: ['201807', '201806', '201805', '201804', '201803', '201802', '201801']
//   },
//   ypTeachers: {
//     Data: [],
//     xAxisData: []
//   },
//   xwTeachers: {
//     Data: [],
//     xAxisData: []
//   },
//   students: {
//     Data: [],
//     xAxisData: []
//   }
// }
const score = {
  stdplot: {
    xaxis: '-6486,-6103,-5720,-5337,-4954,-4571,-4188,-3805,-3422,-3039,-2656,-2273,-1890,-1507,-1124,-741,-358,25,408,791,1174,1557,1940,2323,2706,3090,3473,3856,4239,4622,5005,5388,5771,6154,6537,6920,7303,7686,8069,8452,8835,9218,9601,9984,10367,10750,11133,11516,11899,12282,12666,13049,13432,13815,14198,14581,14964,15347,15730,16113,16496,16879,17262,17645,18028,18411,18794,19177,19560,19943,20326,20709,21092,21475,21858,22242,22625,23008,23391,23774,24157,24540,24923,25306,25689,26072,26455,26838,27221,27604,27987,28370,28753,29136,29519,29902,30285,30668,31051,31434',
    mean: '7248.59',
    lower: '-2729.19',
    upper: '17226.37',
    yaxis: '1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,17,9,2,3,3,2,1,4,7,9,29,30,42,32,25,48,33,41,33,38,36,29,28,33,23,15,20,43,18,19,12,13,7,5,7,2,3,1,2,1,0,0,0,2,1,0,1,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,1',
    stdev: '3325.93'
  }
}

export default {
  name: 'dashboard-admin',
  components: {
    PanelGroup,
    LineChart,
    TransactionTable,
    NormalDistribution,
    SelectOptions
  },
  data() {
    return {
      score: score,
      chartData: {},

      activeName: 'first',
      t: {
        schoolyear: '',
        semesters: '',
        grade: '',
        subject: '',
        examin: ''
      },
      schoolyearOptions: [],
      semestersOptions: [],
      gradeOptions: [],
      subjectOptions: [],
      examinOptions: []
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ])
  },
  mounted: function() {
    axios.post('/api/dashboard/selectOptions').then(response => {
      this.schoolyearOptions = response.data.schoolyear
      if (this.schoolyearOptions.length > 0) {
        this.t.schoolyear = this.schoolyearOptions[0].value
        this.schoolyear = this.schoolyearOptions[0].value
      }
      this.semestersOptions = response.data.semester
      if (this.semestersOptions.length > 0) {
        this.t.semesters = this.semestersOptions[0].value
      }
      this.gradeOptions = response.data.grade
      if (this.gradeOptions.length > 0) {
        this.t.grade = this.gradeOptions[0].value
      }
      this.subjectOptions = response.data.subject
      if (this.subjectOptions.length > 0) {
        this.t.subject = this.subjectOptions[0].value
      }
      const formData = new FormData()
      formData.append('schoolyear', this.t.schoolyear)
      formData.append('semesters', this.t.semesters)
      axios.post('/api/dashboard/getExaminOptionsWithFilter',formData).then(response => {
        this.examinOptions = response.data.result
        if (this.examinOptions.length > 0) {
          this.t.examin = this.examinOptions[0].value
        }
        this.init(this.t.schoolyear, this.t.semesters, this.t.grade, this.t.subject, this.t.examin)
      }).catch(error => {
        console.log(error)
      })
    }).catch(error => {
      console.log(error)
    })
  },
  methods: {
    addParam(arr, target) {
      let flag = false
      const targets = parseFloat(target)
      if (targets < parseFloat(arr[0])) {
        arr.unshift(targets.toString())
        return arr
      }
      if (targets > parseFloat(arr[arr.length - 1])) {
        arr.push(targets.toString())
        return arr
      }
      for (var i = 0; i < arr.length; i++) {
        if (parseFloat(arr[i]) > targets) {
          if (arr[i - 1] == targets) {
            flag = true
          }

          break
        }
      }
      if (flag) {
        return arr
      } else {
        arr.splice(i, 0, targets.toString())
        return arr
      }
    },
    getParam(low, mean, up, top) {
      var res = {}
      res['low'] = low
      res['mean'] = mean
      res['up'] = up
      res['top'] = top
      return res
    },
    fun(x, u, a) {
      return (1 / Math.sqrt(2 * Math.PI) * a) * Math.exp(-1 * ((x - u) * (x - u)) / (2 * a * a))
    },
    handleClick() {

    },
    init(schoolyear, semesters, grade, subject, examin) {
      const formData = new FormData()
      formData.append('schoolyearenum_id', schoolyear)
      formData.append('semesterenum_id', semesters)
      formData.append('subject_id', subject)
      formData.append('gradeenum_id', grade)
      formData.append('examin', examin)
      // this.$store.dispatch('GetAllSignupDetail', signupInfo).
      this.score = []
      axios.post('/api/dashboard/queryStuDistribution', formData).then(response => {
        // console.log(response)
        if (response.data.result < 1) {
          this.$message.error('为获取到数据，请重新选择查询条件')
          return
        }
        let x = []
        const y = []
        const mean = parseFloat(response.data.result[0].mean)
        const lower = response.data.result[0].lowers
        const upper = response.data.result[0].uppers
        const stdev = parseFloat(response.data.result[0].stddevscore)

        for (let i = 0; i < response.data.result.length; i++) {
          x.push(response.data.result[i].xaxis)
          y.push(response.data.result[i].yaxis)
        }
        const yArr = []
        const low = mean - 3 * stdev
        const up = mean + 3 * stdev
        // x = this.addParam(x, low.toFixed(0).toString());
        // x = this.addParam(x, mean.toFixed(0).toString());
        // x = this.addParam(x, up.toFixed(0).toString());
        // var top = getTop(y);
        const top = (1 / Math.sqrt(2 * Math.PI) * stdev)
        const mar = this.getParam(low.toFixed(0).toString(), mean.toFixed(0).toString(), up.toFixed(0).toString(), top)
        const mar_low = mar.low
        const mar_top = mar.top
        const mar_up = mar.up
        const mar_mean = mar.mean
        for (let j = 0; j < x.length; j++) {
          const res = this.fun(x[j], mean, stdev).toFixed(2)
          yArr.push(res)
        }

        this.chartData = {
          'yArr': yArr,
          'x': x,
          'y': y,
          'mar_low': mar_low,
          'mar_top': mar_top,
          'mar_up': mar_up,
          'mar_mean': mar_mean
        }
      }).catch(error => {
        console.log(error)
        this.$message.error('获取成绩分布失败，请稍后重试')
      })
    },
    changeExamin: function(schoolyear, semesters) {
      const formData = new FormData()
      formData.append('schoolyear', schoolyear)
      formData.append('semesters', semesters)
      axios.post('/api/dashboard/getExaminOptionsWithFilter',formData).then(response => {
        this.examinOptions = response.data.result
        if (this.examinOptions.length > 0) {
          this.t.examin = this.examinOptions[0].value
        }
        this.init(this.t.schoolyear, this.t.semesters, this.t.grade, this.t.subject, this.t.examin)
      }).catch(error => {
        console.log(error)
      })
    },
    search: function(schoolyear, semesters, grade, subject, examin) {
      const formData = new FormData()
      formData.append('schoolyearenum_id', schoolyear)
      formData.append('semesterenum_id', semesters)
      formData.append('subject_id', subject)
      formData.append('gradeenum_id', grade)
      formData.append('examin', examin)
      // this.$store.dispatch('GetAllSignupDetail', signupInfo).
      axios.post('/api/dashboard/queryStuDistribution', formData).then(response => {
        if (response.data.result < 1) {
          this.$message.error('为获取到数据，请重新选择查询条件')
          return
        }
        // console.log(response)
        const x = []
        const y = []
        const mean = parseFloat(response.data.result[0].mean)
        const lower = response.data.result[0].lowers
        const upper = response.data.result[0].uppers
        const stdev = parseFloat(response.data.result[0].stddevscore)
        for (let i = 0; i < response.data.result.length; i++) {
          x.push(response.data.result[i].xaxis)
          y.push(response.data.result[i].yaxis)
        }
        const yArr = []
        const low = mean - 3 * stdev
        const up = mean + 3 * stdev
        // x = this.addParam(x, low.toFixed(0).toString());
        // x = this.addParam(x, mean.toFixed(0).toString());
        // x = this.addParam(x, up.toFixed(0).toString());
        console.log(x)
        // var top = getTop(y);
        const top = (1 / Math.sqrt(2 * Math.PI) * stdev)
        const mar = this.getParam(low.toFixed(0).toString(), mean.toFixed(0).toString(), up.toFixed(0).toString(), top)
        const mar_low = mar.low
        const mar_top = mar.top
        const mar_up = mar.up
        const mar_mean = mar.mean
        for (let j = 0; j < x.length; j++) {
          const res = this.fun(x[j], mean, stdev).toFixed(2)
          yArr.push(res)
        }
        this.chartData = {
          'yArr': yArr,
          'x': x,
          'y': y,
          'mar_low': mar_low,
          'mar_top': mar_top,
          'mar_up': mar_up,
          'mar_mean': mar_mean
        }
      }).catch(error => {
        console.log(error)
        this.$message.error('获取成绩分布失败，请稍后重试')
      })
    }

  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
</style>
